<script setup>
import { onMounted, ref } from "vue";
import { useRouter } from "vue-router";
import { Toast } from "vant";
import LoginRecordApi from '../api/loginRecord'

onMounted(() => {
  loading.value = true
  queryByCond()
})

const router = useRouter();
const onClickLeft = () => router.push('/main');
const onClickRight = () => router.push('/loginRecord/add');

const loading = ref(false)
// 列表数据
const dataSorce = ref({
  list: []
})
// 获取列表数据
const pageSize = ref(10)
const pageNum = ref(1)
const queryByCond = () => {
  return new Promise((resolve, reject) => {
    LoginRecordApi.queryByCond({}, pageSize.value, pageNum.value)
      .then((response) => {
        loading.value = false
        const data = response.data
        if (data.code === 200) {
          dataSorce.value = data.data
        } else {
          Toast.fail(data.message);
          reject();
        }
      })
      .catch((error) => {
        loading.value = false
        if (error.message !== "") {
          Toast.fail(error.message);
        }
        reject(error);
      });
  });
}

// 跳转详情
const goDetail = (record) => {
  sessionStorage.record = JSON.stringify(record) 
  router.push({
    path: '/loginRecord/detail',
    query: {
      id: record.id
    }
  })
}

</script>

<template>
  <div class="list-page">
    <van-nav-bar title="列表" left-text="返回" left-arrow @click-left="onClickLeft" @click-right="onClickRight">
      <template #right>
        <van-icon name="add-o" size="20" />
      </template>
    </van-nav-bar>

    <van-list class="list">
      <van-loading v-if="loading" size="24px" color="#1890ff" vertical>加载中...</van-loading>
      <div v-else>
        <van-cell class="list-item" v-for="item in dataSorce.list" :key="item.id" @click="goDetail(item)">
          <template #default>
            <div class="blue-bar"></div>
            <span class="item-title">{{ item.title }}</span>
            <div>
              <div>ID：{{ item.id }}</div>
              <div>记录创建者用户名：{{ item.createUser }}</div>
              <div>登录用户真实名称：{{ item.createUserRealName }}</div>
              <div>记录创建时间：{{ item.createTime }}</div>
              <div>记录删除时间：{{ item.deleteTime }}</div>
            </div>
          </template>
        </van-cell>
      </div>

    </van-list>
  </div>
</template>

<style scoped>
.list-page {
  background: #ebedf0;
  height: 100vh;
  overflow-y: scroll;
  overflow-x: hidden;
}

.list {
  padding-bottom: 60px;
}

.list-item {
  margin: 16px 16px 0 16px;
  border-radius: 8px;
  width: auto;
}

.blue-bar {
  background: #1989fa;
  width: 2px;
  height: 16px;
  display: inline-block;
  position: absolute;
  top: 3px;
  border-radius: 5px;
}

.item-title {
  margin-left: 8px;
  font-size: 16px;
  font-weight: 800;
}
</style>